<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
				background-color: #4366a7;
				background: linear-gradient(to top,#ffeabe 0,#5d2f2f 100%);
			}
			#myCanvas{
				position: absolute;
				z-index: 1;
			}
			input[type="range"]{
				width: 400px;
			}
			.ui{
				display: none;
				color: #fff;
			}
			.inline{
				display: flex;
				height: 60px;
				align-items: center;
			}
			.txt{
				margin-right: 20px;
			}
		</style>
	</head>
	<body>
		<button style="position: absolute;padding: 10px;z-index: 5;" onclick="fun()">测试</button>
		<canvas id="myCanvas" width="800" height="800"></canvas>
		<div class="ui">
			<div class="inline">
				<div class="txt">振幅</div>
				<input type="range" id="swing" value="50" min="0" max="1000" />
			</div>
			<div class="inline">
				<div class="txt">频率</div>
				<input type="range" id="freq" value="10" min="0" max="60" />
			</div>
		</div>
		<script type="text/javascript" src="tCanvas.js"></script>
		<script type="text/javascript">
			var pDemo = new Particle({
				mode: 3,
			})
			function fun(){
				clearInterval(pDemo.timer)
				pDemo = new Particle({
					mode: 4
				})
			}
			swing.oninput = function(){
				pDemo.swing = this.value
			}
			freq.oninput = function(){
				pDemo.freq = this.value / 10
			}
		</script>
	</body>
</html>
